<template>
  <div class="articleWrap">
    <!-- 单图显示模式 -->
    <nuxt-link :to="`/post/postdetail?id=${article.id}`">
      <el-row
        v-if="article.images.length > 0 && article.images.length < 3"
        type="flex"
        justify="space-between"
        align="middle"
      >
        <el-col class="single-pic">
          <img :src="article.images[0]" alt="" />
        </el-col>
        <el-col class="single-cotent">
          <h4 class="title">{{ article.title }}</h4>
          <p class="summary" v-html="article.summary"></p>
          <div class="info">
            <div class="info-user">
              <span class="location">
                <i class="el-icon-location-outline"></i>{{ article.cityName }}
              </span>
              <span>by</span>
              <div class="userInfo">
                <img
                  :src="$axios.defaults.baseURL + article.account.defaultAvatar"
                />
                {{ article.account.nickname }}
              </div>
              <span><i class="el-icon-view"></i>{{ article.watch }}</span>
            </div>
            <span class="like">{{ article.like }}赞</span>
          </div>
        </el-col>
      </el-row>
    </nuxt-link>
    <!-- 三图显示模式 -->
    <nuxt-link :to="`/post/postdetail?id=${article.id}`">
      <el-row v-if="article.images.length >= 3 || article.images.length == 0">
        <h4 class="title">{{ article.title }}</h4>
        <p class="summary" v-html="article.summary"></p>
        <el-row
          type="flex"
          justify="space-beteewn"
          align="middle"
          class="multi-pic"
          v-if="article.images.length >= 3"
        >
          <el-col :span="8">
            <img :src="article.images[0]" alt="" />
          </el-col>
          <el-col :span="8">
            <img :src="article.images[1]" alt="" />
          </el-col>
          <el-col :span="8">
            <img :src="article.images[2]" alt="" />
          </el-col>
        </el-row>
        <div class="info">
          <div class="info-user">
            <span class="location">
              <i class="el-icon-location-outline"></i>{{ article.cityName }}
            </span>
            <span>by</span>
            <div class="userInfo">
              <img
                :src="$axios.defaults.baseURL + article.account.defaultAvatar"
              />
              {{ article.account.nickname }}
            </div>
            <span><i class="el-icon-view"></i>{{ article.watch }}</span>
          </div>
          <span class="like">{{ article.like || 0 }}赞</span>
        </div>
      </el-row>
    </nuxt-link>
  </div>
</template>

<script>
export default {
  props: ["article"],
};
</script>

<style lang="less" scoped>
.articleWrap {
  width: 100%;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  .single-pic {
    width: 220px;
    height: 150px;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .single-cotent {
    width: 516px;
  }
  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 15px;
    font-weight: 400;
    font-size: 18px;
    &:hover {
      color: orange;
    }
  }
  .summary {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 15px;
  }
  .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: #666;
    img {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      margin-bottom: 4px;
      margin-left: 5px;
    }
    .info-user {
      display: flex;
      .location {
        margin-right: 5px;
      }
      .userInfo {
        margin-right: 5px;
        color: orange;
      }
    }
    .like {
      color: orange;
      font-size: 16px;
    }
  }
  .multi-pic {
    margin-bottom: 20px;
    img {
      width: 220px;
      height: 150px;
    }
  }
}
</style>